<template>
  <el-dialog title="详情信息" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="商品信息">
        <el-form :model="dataForm" ref="dataForm" label-width="95px" size="mini">
            <div class="text item">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="商品代码" prop="code">
                    <el-input v-model="dataForm.code" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品条码" prop="barcode">
                    <el-input v-model="dataForm.barcode" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品名称" prop="name">
                    <el-input v-model="dataForm.name" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="商品品种" prop="brandName">
                    <el-input v-model="dataForm.brandName" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="型号" prop="spec">
                    <el-input v-model="dataForm.spec" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8" v-if="this.dataForm.ctgId ==1">
                  <el-form-item label="厂家型号" prop="manufacturerSpec">
                    <el-input v-model="dataForm.manufacturerSpec" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" v-if="this.dataForm.ctgId ==1 || this.dataForm.ctgId ==6 || this.dataForm.ctgId ==8">
                  <el-form-item label="厂家色号" prop="manufacturerColorNumber">
                    <el-input v-model="dataForm.manufacturerColorNumber" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==1 || this.dataForm.ctgId ==6">
                  <el-form-item label="色号" prop="color">
                    <el-input v-model="dataForm.color" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==8">
                  <el-form-item label="老花镜度数">
                    <el-input v-model="dataForm.mirrorBall" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==1 || this.dataForm.ctgId ==6 || this.dataForm.ctgId ==8">
                  <el-form-item label="镜架尺寸" prop="goodsSize">
                    <el-input v-model="dataForm.goodsSize" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" v-if="this.dataForm.ctgId ==2 || this.dataForm.ctgId ==3 || this.dataForm.ctgId ==7 || this.dataForm.ctgId ==9">
                  <el-form-item label="商品编号" prop="color">
                    <el-input v-model="dataForm.color" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==7">
                  <el-form-item label="其他商品大类" prop="otherCommodityCategories">
                    <el-select v-model="dataForm.otherCommodityCategories" disabled>
                      <el-option v-for="item in bizData.otherCommodityCategories" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==7">
                  <el-form-item label="其他商品小类" prop="otherCommoditySubcategories">
                    <el-select v-model="dataForm.otherCommoditySubcategories" disabled>
                      <el-option v-for="item in bizData.otherCommoditySubcategories" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==2">
                  <el-form-item label="配件型" prop="accessoriesType">
                    <el-select v-model="dataForm.accessoriesType" disabled>
                      <el-option v-for="item in accessoriesTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计量单位" prop="unitType">
                    <el-select v-model="dataForm.unitType" disabled>
                      <el-option v-for="item in unitTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3 ||this.dataForm.ctgId ==4">
                  <el-form-item label="球镜">
                    <el-input v-model="dataForm.mirrorBall" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3 ||this.dataForm.ctgId ==4">
                  <el-form-item label="柱镜">
                    <el-input v-model="dataForm.columnMirror" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="下加光">
                    <el-input v-model="dataForm.toTheLight" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="轴位">
                    <el-input v-model="dataForm.axialDirection" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="镜片分类" prop="photometricClassification">
                    <el-select v-model="dataForm.photometricClassification" disabled>
                      <el-option v-for="item in bizData.photometricClassification" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="折射率" prop="refractiveIndex">
                    <el-select v-model="dataForm.refractiveIndex" disabled>
                      <el-option v-for="item in bizData.refractivityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="渐进片分类" prop="progressiveSliceClassification">
                    <el-select v-model="dataForm.progressiveSliceClassification" disabled>
                      <el-option v-for="item in bizData.progressiveSliceClassification" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="镜片功能" prop="lensFunction">
                    <el-select v-model="dataForm.lensFunction" disabled>
                      <el-option v-for="item in lensFunction" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==3">
                  <el-form-item label="材料分类" prop="lensMaterial">
                    <el-select v-model="dataForm.lensMaterial" disabled>
                      <el-option v-for="item in bizData.lensMaterial" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4">
                  <el-form-item label="曲率">
                    <el-input v-model="dataForm.curvature" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4">
                  <el-form-item label="使用类型" prop="useType">
                    <el-select v-model="dataForm.useType" disabled>
                      <el-option v-for="item in bizData.useType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4">
                  <el-form-item label="直径">
                    <el-input v-model="dataForm.diameter" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4">
                  <el-form-item label="使用类型" prop="disusedClassification">
                    <el-select v-model="dataForm.disusedClassification" disabled>
                      <el-option v-for="item in bizData.disusedClassification" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==5">
                  <el-form-item label="主容量">
                    <el-input v-model="dataForm.primaryCapacity" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==5">
                  <el-form-item label="次容量">
                    <el-input v-model="dataForm.secondaryCapacity" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4 || this.dataForm.ctgId ==5">
                  <el-form-item label="有效期提醒上限">
                    <el-input v-model="dataForm.expiryReminderBefore" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="this.dataForm.ctgId ==4 || this.dataForm.ctgId ==5">
                  <el-form-item label="有效期提醒下限">
                    <el-input v-model="dataForm.expiryReminderEnd" readonly="readonly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-col :span="8" v-if="this.dataForm.ctgId ==1">
                <el-form-item label="工艺类型" prop="craftType">
                  <el-select v-model="dataForm.craftType" disabled>
                    <el-option v-for="item in craftTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="this.dataForm.ctgId ==1">
                <el-form-item label="镜架材质" prop="frameMaterial">
                  <el-select v-model="dataForm.frameMaterial" disabled>
                    <el-option v-for="item in frameMaterialData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="库存预警上限" prop="inventoryTop">
                    <el-input v-model="dataForm.inventoryTop" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="库存预警下限" prop="inventoryFloor">
                    <el-input v-model="dataForm.inventoryFloor" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="库存红色预警" prop="redAlert">
                    <el-input v-model="dataForm.redAlert" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="当前库存量" prop="goodsQuantity">
                    <el-input v-model="dataForm.goodsQuantity" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-divider content-position="left">价格项</el-divider>
              <el-row v-for="(item,index) in this.priceGroup" :key="index">
                <el-col :span="3" style="text-align: center;">
                  <el-form-item label-width="0">{{item.priceGroupName}}</el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="税率" :prop="'list.'+index+'.taxRate'">
                    <el-input v-model="item.taxRate" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="含税单价" :prop="'list.'+index+'.taxPrice'">
                    <el-input v-model="item.taxPrice" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="零售价格" :prop="'list.'+index+'.price'">
                    <el-input v-model="item.price" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="库存流水" name="库存流水">
        <inventory-log v-if="twoVisible" ref="twoTab" :info="this.paramLog"></inventory-log>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { mapGetters } from "vuex";
  import { filterParams } from "@/util/tools";
  import { remote } from '@/api/admin/dict'
  import { getInfoByCode } from "@/api/eims/goods";
  import { goodsPriceList } from "@/api/eims/goods-price";
  import InventoryLog from "./inventory-log";

  export default {
    data() {
      return {
        activeName: "商品信息",
        visible: false,
        twoVisible: false,
        bizData: {},
        priceGroup: [],
        goodsPriceGroup: [],
        unitTypeData: [],
        frameMaterialData: [],
        craftTypeData: [],
        lensFunction: [],
        dataForm: {
          id: 0,
          ctgId: "",
          ctgSaleId: "",
          name: "",
          code: "",
          barcode: "",
          supplyId: "",
          supplyName: "",
          supplyCode: "",
          brandId: "",
          brandName: "",
          brandCode: "",
          status: "",
          unitType: "",
          spec: "",
          color: "",
          manufacturerColorNumber: "",
          manufacturerSpec: "",
          batchManagement: 0,
          payType: "",
          craftType: "",
          frameMaterial: "",
          goodsSize: "",
          chineseColor: "",
          frameStyle: "",
          purchaseDate: "",
          list: []
        },
        accessoriesTypeOptions: [{
            label: "框镜",
            value: 1
          },
          {
            label: "隐形",
            value: 2
          }
        ],
        dataRule: {}
      };
    },
    components: {
      InventoryLog
    },
    methods: {
      init(info, name, time) {
        this.paramLog = info;
        this.bizData = this.$store.getters.bizData;
        remote('unit_type').then(result => {
          this.unitTypeData = result.data.data
        })
        remote('frame_material').then(result => {
          this.frameMaterialData = result.data.data
        })
        remote('craft_type').then(result => {
          this.craftTypeData = result.data.data
        })
        remote('lens_function').then(result => {
          this.lensFunction = result.data.data
        })
        this.time = time
        this.visible = true;
        this.activeName = name;
        let param = {};
        param.name = name;
        this.dataListLoading = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          getInfoByCode(info.goodsCode).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data;
                this.priceGroup = this.dataForm.list;
                this.dataForm.goodsQuantity = info.goodsQuantity;
                this.dataForm.ctgId = info.ctgId;
                this.dataForm.inventoryTop = response.data.data.inventoryTop ?
                  response.data.data.inventoryTop :
                  "未设置";
                this.dataForm.inventoryFloor = response.data.data.inventoryFloor ?
                  response.data.data.inventoryFloor :
                  "未设置";
                this.dataForm.redAlert = response.data.data.redAlert ?
                  response.data.data.redAlert :
                  "未设置";
                if (response.data.data.customizedMirrorBallMin) {
                  this.dataForm.mirrorBall =
                    response.data.data.customizedMirrorBallMin +
                    " 至 " +
                    response.data.data.customizedMirrorBallMax;
                }
                if (response.data.data.customizedColumnMirrorMin) {
                  this.dataForm.columnMirror =
                    response.data.data.customizedColumnMirrorMin +
                    " 至 " +
                    response.data.data.customizedColumnMirrorMax;
                }
                if (response.data.data.toTheLightMin) {
                  this.dataForm.toTheLight =
                    response.data.data.toTheLightMin +
                    " 至 " +
                    response.data.data.toTheLightMax;
                }
              }else{
                this.$message.error(response.data.msg)
              }
            }).then(() => {
              this.handleClick(param);
            });
        });
        this.dataListLoading = false;
      },
      handleClick(tab, event) {
        if (tab.name == "商品信息") {
        } else if (tab.name == "库存流水") {
          this.twoVisible = true;
          this.$nextTick(() => {
            this.$refs.twoTab.init(this.paramLog, this.time);
          });
        }
      },
      //  类型转换
      valueOrNameTypeChange(value) {
        let obj = {};
        obj = this.typeOptions.find(item => {
          if (item.value == value) {
            return item;
          }
        });
        if (obj && obj.name) {
          return obj.name;
        }
      },
      //支付状态类型转换
      payStatusTypeChange(value) {
        let obj = {};
        obj = this.payStatusOptions.find(item => {
          if (item.value == value) {
            return item;
          }
        });
        if (obj && obj.name) {
          return obj.name;
        }
      },
      refundFlagChange(value) {
        let obj = {};
        obj = this.refundFlagOptions.find(item => {
          if (item.value == value) {
            return item;
          }
        });
        if (obj && obj.name) {
          return obj.name;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .miui-table {
    width: 100%;
  }

  .miui-table tr>th,
  .miui-table tr>td {
    border: solid 1px #e7e7e7;
    background-color: #ecf5ff;
    padding: 3px 5px;
    text-align: center;
  }
</style>
